<template>
	<view class="content">
		<!-- 动画播放 -->
		<view class="contentTwo" v-if="!drawAmi">
			<image src="https://home.miaokaikeji.com/web/applet/img/choujiang.gif" mode="widthFix"></image>
		</view>
		<!-- 龙动画播放 -->
		<view class="contentTwoqq" v-if="showLong">
			<image src="https://home.miaokaikeji.com/web/applet/newimg/dragon.gif" ></image>
		</view>
		<!-- 结果显示 -->
		<view v-if="drawAmi">
			<!-- 返回按钮 -->
			<image class="back" src="/static/shop/backa.png" @click="returnBack"></image>
			<!-- logo显示 -->
			<image class="showlogo" src="/static/index/miaokaishow.png"></image>
			<!-- 恭喜获得标题 -->
			<view class="title-box" v-if="dataList.length>0 || dataList.id">
				<image src="/static/index/gxhd.png"></image>
			</view>
			<!-- 单卡样式 -->
			<view class="only-shop" v-if="dataList.length==1 ">
				<view class="relative" style="width: 100%;">
					<view class="justshow" :style="{backgroundImage: (dataList[0].level==1)?'url(https://home.miaokaikeji.com/web/applet/newimg/lv1.png)':(dataList[0].level==2)?'url(https://home.miaokaikeji.com/web/applet/newimg/lv2.png)':(dataList[0].level==3)?'url(https://home.miaokaikeji.com/web/applet/newimg/lv3.png)':(dataList[0].level==4)?'url(https://home.miaokaikeji.com/web/applet/newimg/lv4.png)':''}" @click="openDetail((dataList[0].id),(dataList[0].dragonBallFlag))">
						<view class="img relative">
							<image class="absolute level" :src="(dataList[0].level==1)?'/static/index/z1.png':(dataList[0].level==2)?'/static/index/z2.png':(dataList[0].level==3)?'/static/index/xiyou.png':(dataList[0].level==4)?'/static/index/zg.png':''" ></image>
							<image class="shop" :src="dataList[0].imgUrlList[0]" mode="widthFix"></image>
						</view>
						<view class="title">{{dataList[0].name}}</view>
						<view class="pri" v-if="dataList.dragonBallFlag==1">无价之宝</view>
						<view class="pri" v-else>￥{{dataList[0].newprice}}</view>
					</view>
					<!-- <view class="backshow"></view> -->
				</view>
			</view>
			<!-- 小于等于5个奖品的样式 -->
			<view class="five-shop" v-if="dataList.length<=5&&dataList.length>1">
				<view class="relative box" v-for="(item,index) in dataList" :key="index">
					<view class="justshow" :style="{backgroundImage: item.level==1?'url(https://home.miaokaikeji.com/web/applet/newimg/lv1.png)':item.level==2?'url(https://home.miaokaikeji.com/web/applet/newimg/lv2.png)':item.level==3?'url(https://home.miaokaikeji.com/web/applet/newimg/lv3.png)':item.level==4?'url(https://home.miaokaikeji.com/web/applet/newimg/lv4.png)':''}" @click="openDetail(item.id,item.dragonBallFlag)">
						<view class="img relative">
							<image class="absolute level" :src="item.level==1?'/static/index/z1.png':item.level==2?'/static/index/z2.png':item.level==3?'/static/index/xiyou.png':item.level==4?'/static/index/zg.png':''"></image>
							<image class="shop" :src="item.imgUrlList[0]" mode="widthFix"></image>
						</view>
						<view class="pri" v-if="item.dragonBallFlag!==1">￥{{item.newprice}}</view>
						<view class="pri" v-if="item.dragonBallFlag==1">无价之宝</view>
						<view class="pria" v-if="item.dragonBallFlag!==1">
							<image src="/static/doudoux.png"></image>
							<text class="text">+{{item.newrecyclePrice}}</text>
						</view>
					</view>
					<!-- <view class="backshow"></view> -->
					<view class="btn-box">
						<view class="btn" v-if="item.dragonBallFlag!==1" @click="consiOnly('only',item.storeId)">回收</view>
					</view>
				</view>
			</view>
			<!-- 大于五个商品的样式 -->
			<swiper class="more-shop" :current="current" v-if="dataList.length>5&&newCardList.length>0">
				<swiper-item v-for="(item,index) in newCardList" :key="index">
					<view class="qee">
						<view class="relative box" v-for="(itemd,indexd) in item" :key="indexd">
							<view class="justshow" :style="{backgroundImage: itemd.level==1?'url(https://home.miaokaikeji.com/web/applet/newimg/lv1.png)':itemd.level==2?'url(https://home.miaokaikeji.com/web/applet/newimg/lv2.png)':itemd.level==3?'url(https://home.miaokaikeji.com/web/applet/newimg/lv3.png)':itemd.level==4?'url(https://home.miaokaikeji.com/web/applet/newimg/lv4.png)':''}" @click="openDetail(itemd.id,itemd.dragonBallFlag)">
								<view class="img relative">
									<image class="absolute level" :src="itemd.level==1?'/static/index/z1.png':itemd.level==2?'/static/index/z2.png':itemd.level==3?'/static/index/xiyou.png':itemd.level==4?'/static/index/zg.png':''"></image>
									<image class="shop" :src="itemd.imgUrlList[0]" mode="widthFix"></image>
								</view>
								<view class="pri" v-if="itemd.dragonBallFlag!==1">￥{{itemd.newprice}}</view>
								<view class="pri" v-if="itemd.dragonBallFlag==1">无价之宝</view>
								<view class="pria" v-if="itemd.dragonBallFlag!==1">
									<image src="/static/doudoux.png"></image>
									<text class="text">+{{itemd.newrecyclePrice}}</text>
								</view>
							</view>
							<!-- <view class="backshow"></view> -->
							<view class="btn-box">
								<view class="btn" v-if="itemd.dragonBallFlag!==1" @click="consiOnly('only',itemd.storeId)">回收</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 上下页 -->
			<view class="jian"  @click="numberChage(1)" v-if="dataList.length>5">
				<image src="/static/index/wave_arrowupa.png"></image>
			</view>
			<view class="jia" @click="numberChage(2)" v-if="dataList.length>5">
				<image src="/static/index/wave_arrowup.png"></image>
			</view>
			<!-- 全部回收金额 -->
			<view class="jishou-box1" v-if="dataList.length>0 || dataList.id">
				<view class="btn" @click="sureSubmit" v-if="showBtn">
					<image src="/static/doudoux.png"></image>
					<text class="text">+{{totalPrice}}</text>
				</view>
				<view class="btn111" v-if="showBtn"></view>
			</view>
			<!-- 全部回收 -->
			<view class="jishou-box2" v-if="dataList.length>0 || dataList.id">
				<view class="btn" @click="sureSubmit" v-if="showBtn">全部回收</view>
				<view class="btn" @click="openPoupSucaa" v-if="showBtn">去提货</view>
			</view>
			<!-- 再玩一次 -->
			<block v-if="freeActiveShow!==1">
				<view class="bottom-btn" v-if="dataList.length>0 || dataList.id">
					<view class="btn" hover-class="scale9" @click="openBuy" v-if="showBtn"></view>
				</view>
			</block>
		</view>
		<!-- 购买弹窗 -->
		<my-buy ref="showBuy" sourceType="LotteryResults" type="bottom" :boxId="boxId" :maskClick="true" @change="changeBuy" v-if="boxId"></my-buy>
		<my-popup ref="showPoupSuc" type="center" :maskClick="true" @change="changePoupSuc" class="pop-box">
			<view class="uni-tip-success">
				<view class="title">龙珠说明</view>
				<view class="ts">龙珠可在个人中心->我的龙珠->龙珠商城兑换商品</view>
				<view class="btn-box">
					<view class="btn" @click="closePoupSuc">我知道了</view>
					<view class="btn" @click="goLz">去龙珠商城</view>
				</view>
			</view>
		</my-popup>
		<!--引流弹窗 -->
		<my-popup ref="showPoupSuc" type="center" :maskClick="true" @change="changePoupSucaa" class="pop-box">
			<view class="uni-tip-successaa">
				<view class="title">提货请下载APP</view>
				<image class="ts" src="https://home.miaokaikeji.com/web/playProduce/down.png" mode="widthFix"></image>
				<view class="aaa">截图保存二维码</view>
				<view class="btn-box">
					<view class="btn" @click="closePoupSucaa" >关闭弹窗</view>
					<view class="btn" @click="down">下载</view>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
var _this;
import { priceInteger } from "@/utils";
export default {
	data() {
		return {
			dataList:[],
			newCardList:[],
			blindList:{},
			current:0,
			boxId:'', //盲盒ID
			disabled:false,
			showBtn:false, //显示按钮
			drawAmi:true,
			showLong:false,
			boxItem:{},
			freeActiveShow:0,
			timeOut:null,
		};
	},
	onLoad(options) {
		_this = this;
		if(options.boxId){
			_this.boxId=options.boxId;
			_this.getBlindList();
		}
		options.data=JSON.parse(options.data ? options.data : '[]');
		_this.dataList=options.data;
		// 以下是处理多抽大于五个是特殊处理
		// 如果数组长度大于5个就拆分成页面功能需要的新数组
		if(Array.isArray(_this.dataList)&&_this.dataList.length>5){
			// 播放GIF动画
			// 跳过动画处理
			if(!options.drawAmi){
				_this.drawAmi=false;
				setTimeout(function(){
					_this.drawAmi=true;
					clearTimeout()
				},2000)
			}
			for (var i = 0; i < _this.dataList.length; i += 5) {
			    _this.newCardList.push(_this.dataList.slice(i, i + 5));
			 }
		}
		
		// 处理抽出龙珠播放龙的GIF
		if(Array.isArray(_this.dataList)&&_this.dataList.length<=5&&_this.drawAmi){
			// 多抽五连抽及以下
			if(_this.dataList.find(item => {return item.dragonBallFlag == 1}) != undefined){
				_this.showLong=true;
				_this.timeOut=setTimeout(function(){
					_this.showLong=false;
				},4900)
			}
		}else if(!Array.isArray(_this.dataList)&&_this.drawAmi){
			// 单抽判断
			if(_this.dataList.dragonBallFlag==1){
				_this.showLong=true;
				_this.timeOut=setTimeout(function(){
					_this.showLong=false;
				},4900)
			}
		}else if(Array.isArray(_this.dataList)&&_this.dataList.length>5){
			// 多抽五连抽以上
			if(!_this.drawAmi){
				if(_this.dataList.find(item => {return item.dragonBallFlag == 1}) != undefined){
					setTimeout(function(){
						_this.showLong=true;
						_this.timeOut=setTimeout(function(){
							_this.showLong=false;
						},4900)
					},1600)
				}
			}else{
				if(_this.dataList.find(item => {return item.dragonBallFlag == 1}) != undefined){
					_this.showLong=true;
					_this.timeOut=setTimeout(function(){
						_this.showLong=false;
					},4900)
				}
			}
		}
	},
	onShow() {},
	mounted() {
		// 延迟显示按钮，为了处理翻转特效没完点击弹窗的ios系统bug
		setTimeout(function(){
			_this.showBtn=true
		},1500)
	},
	computed:{
		//前端计算得到的总价
		totalPrice:function(){
			let number=0;
			if(Array.isArray(this.dataList)){
				this.dataList.forEach((item, index) => {
					if(item.dragonBallFlag!==1){
						number+=item.recyclePrice;
					}
				})
				return priceInteger(number);
			}else{
				if(this.dataList.dragonBallFlag!==1){
					return this.dataList.recyclePrice;
				}else{
					return '0.00';
				}
			}
		}
	},
	methods: {
		getBlindList() {
			_this.$HTTP({
				method: 'GET',
				url: 'shopServer/box/getBoxDetail/'+_this.boxId,
				data: {
					time: Date.parse(new Date())
				}
				// header:'form'
			}).then(res => {
				_this.freeActiveShow=res.discountBox;
			}).catch(err => {
				console.log(err);
			});
		},
		returnBack() {
			if(_this.freeActiveShow==1){
				uni.switchTab({
					url: '/pages/index/index'
				});
			}else{
				uni.navigateBack({
					delta: 1
				});
			}
		},
		numberChage(type){
			if(type==1){
				if(_this.current<=0){
					return;
				}
				_this.current--;
			}else if(type==2){
				if(_this.current>=1){
					return;
				}
				_this.current++;
			}
		},
		sureSubmit(){
			uni.showModal({
				title: '回收',
				content: '是否回收全部商品？',
				success: function (res) {
					if (res.confirm) {
						_this.consiOnly('more');
					}
				}
			});
		},
		// 回收商品
		consiOnly(type,id){
			let arr=[];
			if(type=='only'){
				arr.push(id);
			}else if(type=='more'){
				if(_this.disabled){
					return;
				}
				_this.disabled=true;
				if(Array.isArray(_this.dataList)==false){
					if(_this.dataList.storeId){
						arr.push(_this.dataList.storeId);
					}
				}else{
					_this.dataList.forEach((item, index) => {
						if(item.storeId){
							arr.push(item.storeId);
						}
					})
				}
			}
			if(arr.length==0){
				_this.$api.msg('龙珠不能回收！');
				_this.disabled=false;
				return;
			}
			_this.$HTTP({
				method: 'POST',
				url: 'shopServer/store/recycleStoreGoods',
				data: {
					storeIdArr: arr,
					time: Date.parse(new Date())
				},
				header:'form'
			}).then(res => {
				if(type=='only'){
					let index=_this.dataList.findIndex((item,index)=>item.storeId==id); //(用index定位抽中的商品)
					_this.dataList.splice(index, 1); //删除指定元素，下标定位
					if(_this.dataList.length>5){
						 _this.newCardList=[];
					}
					for (var i = 0; i < _this.dataList.length; i += 5) {
					    _this.newCardList.push(_this.dataList.slice(i, i + 5));
					 }
				}else{
					setTimeout(function(){
						_this.returnBack();
						_this.disabled=false;
					},800)
				}
				_this.$api.msg('回收成功');
			}).catch(err => {
				_this.disabled=false;
				console.log(err);
			});
		},
		// 引流弹窗
		changePoupSuc(e) {},
		closePoupSuc() {
			_this.$nextTick(() => {
				_this.$refs['showPoupSuc'].close();
			});
		},
		openPoupSuc() {
			_this.$nextTick(() => {
				_this.$refs['showPoupSuc'].open();
			});
		},
		// 购买弹窗事件
		changeBuy(e) {},
		closeBuy() {
			_this.$nextTick(() => {
				_this.$refs['showBuy'].close();
			});
		},
		openBuy() {
			_this.$nextTick(() => {
				_this.$refs['showBuy'].open();
			});
		},
		openDetail(id,type) {
			
			if(type==1){
				_this.openPoupSuc();
			}else{
				_this.$routerTo.navigateTo({
					path: '/pages/index/productDetails?id='+id
				});
			}
		},
		changePoupSucaa(e) {},
		closePoupSucaa() {
			_this.$nextTick(() => {
				_this.$refs['showPoupSuc'].close();
			});
		},
		openPoupSucaa() {
			_this.$nextTick(() => {
				_this.$refs['showPoupSuc'].open();
			});
		},
		down(){
			const {aplus_queue} = window;
			aplus_queue.push({
			 action: 'aplus.record',
			  arguments: ['down','1']
			});
			aplus_queue.push({
			 action: 'aplus.record',
			  arguments: ['createOrder','1']
			});
			window.location.href='https://home.miaokaikeji.com/web/down/';
		},
		goLz(){
			_this.closePoupSuc();
			_this.$routerTo.navigateTo({
				path: '/pagesnew/dragonballs/ballslist'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 引流弹窗
.uni-tip-successaa{
	width: 580rpx;
	// height: 473rpx;
	background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	position: relative;
	z-index: 10;
	border-radius: 30rpx;
	box-sizing: border-box;
	padding: 75rpx 80rpx 80rpx 80rpx;
	.title{
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.ts{
		width: 100%;
		margin-top: 24rpx;
	}
	.aaa{
		width: 100%;
		font-size: 26rpx;
		font-weight: bold;
		color: red;
		text-align: center;
		margin-top: 30rpx
	}
	.btn-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.btn{
			width: 270rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FFC426;
			border-radius: 43rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
// 手机号充值成功弹窗
.uni-tip-success{
	width: 580rpx;
	height: 473rpx;
	background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	position: relative;
	z-index: 10;
	border-radius: 30rpx;
	box-sizing: border-box;
	padding: 75rpx 40rpx 0 40rpx;
	.title{
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.ts{
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.btn-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 90rpx;
		.btn{
			width: 210rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #FFC426;
			border-radius: 43rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
	.contentTwo{
		width: 100%;
		height: 100%;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbg.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 100%;
			height: 200rpx;
		}
	}
	.contentTwoqq{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		image{
			width: 800rpx;
			height:434rpx;
			z-index: 999;
			margin-top: 330rpx;
		}
	}
@keyframes fangda {
	25% {
		transform: scale(1.2);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes fanza {
	0% {
		transform: rotateY(-180deg);
	}
	100% {
		transform: rotateY(-360deg);
	}
}
@keyframes fanz {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}
.content {
	width: 100%;
	height: 1624rpx;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbg.png');
	background-size: 100% 100%;
	.back {
		width: 62rpx;
		height: 62rpx;
		position: absolute;
		left: 80rpx;
		top: 100rpx;
	}
	.showlogo{
		width: 188rpx;
		height: 133rpx;
		position: absolute;
		left: calc(50% - 94rpx);
		top: 65rpx;
	}
	.title-box {
		width: 100%;
		position: absolute;
		top: 220rpx;
		left: 0;
		display: flex;
		justify-content: center;
		image{
			width: 656rpx;
			height: 107rpx;
		}
	}
	.only-shop {
		width: 100%;
		position: absolute;
		top: 420rpx;
		left: 0;
		display: flex;
		justify-content: center;
		animation: fangda 1s;
		.justshow {
			width: 454rpx;
			height: 566rpx;
			position: absolute;
			top: 0;
			left: calc(50% - 227rpx);
			// -webkit-perspective: 10000;
			// backface-visibility: hidden;
			// animation: fanza 1.5s;
			box-sizing: border-box;
			padding: 20rpx;
			background-size: 100% 100%;
			.img {
				width: 100%;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.shop {
					width: 100%;
					height: 100%;
				}
				.level {
					width: 110rpx;
					height: 120rpx;
					right: -40rpx;
					top: -50rpx;
				}
			}
			.title {
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-top: 25rpx;
				text-align: center;
			}
			.pri {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
				position: absolute;
				left: 0;
				bottom: 60rpx;
			}
		}
		.backshow {
			width: 454rpx;
			height: 566rpx;
			position: absolute;
			top: 0;
			left: calc(50% - 227rpx);
			background-image: url('~@/static/index/fpbg2.png');
			background-size: 100% 100%;
			-webkit-perspective: 10000;
			backface-visibility: hidden;
			-webkit-transform: rotateY(-180deg);
			animation: fanz 1.5s;
		}
	}
	.five-shop {
		width: 100%;
		height: 660rpx;
		position: absolute;
		top: 420rpx;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 20rpx;
		animation: fangda 1s;
		.box {
			width: 190rpx;
			height: 300rpx;
			margin: 0 20rpx 30rpx 20rpx;
			.justshow {
				width: 190rpx;
				height: 240rpx;
				position: absolute;
				top: 0;
				left: calc(50% - 95rpx);
				// -webkit-perspective: 10000;
				// backface-visibility: hidden;
				// animation: fanza 1.5s;
				box-sizing: border-box;
				padding: 10rpx;
				background-size: 100% 100%;
				.img {
					width: 100%;
					height: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.shop {
						width: 100%;
						height: 100%;
					}
					.level {
						width: 70rpx;
						height: 76rpx;
						right: -25rpx;
						top: -30rpx;
					}
				}
				.pri {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					position: absolute;
					left: 0;
					bottom: 25rpx;
				}
				.pria{
					width: 156rpx;
					height: 48rpx;
					background-image: url('https://home.miaokaikeji.com/web/applet/newimg/jgjs.png');
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: -34rpx;
					bottom: 60rpx;
					image{
						width: 28rpx;
						height: 26rpx;
						transform: translateY(-5rpx);
					}
					.text{
						font-size: 22rpx;
						color: #FF8210;
						transform: translateY(-5rpx);
					}
				}
			}
			.backshow {
				width: 190rpx;
				height: 240rpx;
				position: absolute;
				top: 0;
				left: calc(50% - 95rpx);
				background-image: url('~@/static/index/fpbg1.png');
				background-size: 100% 100%;
				-webkit-perspective: 10000;
				backface-visibility: hidden;
				-webkit-transform: rotateY(-180deg);
				animation: fanz 1.5s;
			}
			.btn-box{
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: center;
				.btn{
					width: 138rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background: rgba(255,237,163,0.67);
					box-shadow: 0rpx 6rpx 10rpx 1rpx rgba(226,142,29,0.5), inset 0px 3px 6px 1px #FFFFFF;
					border-radius: 22rpx;
					font-size: 24rpx;
					color: #FF8210;
				}
			}
		}
	}
	.jian{
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		left: 20rpx;
		top: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 64rpx;
			height: 64rpx;
		}
	}
	.jia{
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		right: 20rpx;
		top: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 64rpx;
			height: 64rpx;
		}
	}
	.more-shop{
		width: 100%;
		height: 690rpx;
		position: absolute;
		top: 420rpx;
		left: 0;
		box-sizing: border-box;
		padding: 0 20rpx;
		animation: fangda 1s;
		.qee{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding-top: 30rpx;
		}
		.box {
		   width: 190rpx;
		   height: 300rpx;
		   margin: 0 20rpx 30rpx 20rpx;
		   .justshow {
		   	width: 190rpx;
		   	height: 240rpx;
		   	position: absolute;
		   	top: 0;
		   	left: calc(50% - 95rpx);
		   	// -webkit-perspective: 10000;
		   	// backface-visibility: hidden;
		   	// animation: fanza 1.5s;
		   	box-sizing: border-box;
		   	padding: 10rpx;
		   	background-size: 100% 100%;
		   	.img {
		   		width: 100%;
		   		height: 140rpx;
		   		display: flex;
		   		justify-content: center;
		   		align-items: center;
		   		.shop {
		   			width: 100%;
		   			height: 100%;
		   		}
		   		.level {
		   			width: 70rpx;
		   			height: 76rpx;
		   			right: -25rpx;
		   			top: -30rpx;
		   		}
		   	}
		   	.pri {
		   		width: 100%;
		   		text-align: center;
		   		font-size: 24rpx;
		   		font-weight: bold;
		   		color: #FFFFFF;
		   		position: absolute;
		   		left: 0;
		   		bottom: 25rpx;
		   	}
		   	.pria{
		   		width: 156rpx;
		   		height: 48rpx;
		   		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/jgjs.png');
		   		background-size: 100% 100%;
		   		display: flex;
		   		align-items: center;
		   		justify-content: center;
		   		position: absolute;
		   		right: -34rpx;
		   		bottom: 60rpx;
		   		image{
		   			width: 28rpx;
		   			height: 26rpx;
		   			transform: translateY(-5rpx);
		   		}
		   		.text{
		   			font-size: 22rpx;
		   			color: #FF8210;
		   			transform: translateY(-5rpx);
		   		}
		   	}
		   }
		   .backshow {
		   	width: 190rpx;
		   	height: 240rpx;
		   	position: absolute;
		   	top: 0;
		   	left: calc(50% - 95rpx);
		   	background-image: url('~@/static/index/fpbg1.png');
		   	background-size: 100% 100%;
		   	-webkit-perspective: 10000;
		   	backface-visibility: hidden;
		   	-webkit-transform: rotateY(-180deg);
		   	animation: fanz 1.5s;
		   }
		   .btn-box{
		   	width: 100%;
		   	position: absolute;
		   	bottom: 0;
		   	left: 0;
		   	display: flex;
		   	justify-content: center;
		   	.btn{
		   		width: 138rpx;
		   		height: 44rpx;
		   		line-height: 44rpx;
		   		text-align: center;
		   		background: rgba(255,237,163,0.67);
		   		box-shadow: 0rpx 6rpx 10rpx 1rpx rgba(226,142,29,0.5), inset 0px 3px 6px 1px #FFFFFF;
		   		border-radius: 22rpx;
		   		font-size: 24rpx;
		   		color: #FF8210;
		   	}
		   }
		}
	}
	.jishou-box1{
		width: 100%;
		position: absolute;
		left: 0;
		top: 1160rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 100rpx;
		.btn{
			width: 190rpx;
			height: 60rpx;
			background-image: url('https://home.miaokaikeji.com/web/applet/newimg/jgjs.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 32rpx;
				height: 30rpx;
				transform: translateY(-5rpx);
			}
			.text{
				font-size: 24rpx;
				color: #FF8210;
				transform: translateY(-5rpx) translateX(5rpx);
			}
		}
		.btn111{
			width: 190rpx;
			height: 60rpx;
		}
	}
	.jishou-box2{
		width: 100%;
		position: absolute;
		left: 0;
		top: 1220rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 35rpx;
		.btn{
			width: 314rpx;
			height: 76rpx;
			line-height: 66rpx;
			background-image: url('https://home.miaokaikeji.com/web/applet/newimg/qbjs.png');
			background-size: 100% 100%;
			text-align: center;
			font-size: 30rpx;
			color: #FFEFBA;
		}
	}
	.bottom-btn {
		width: 100%;
		position: absolute;
		left: 0;
		top: 1320rpx;
		display: flex;
		justify-content: center;
		.btn{
			width: 412rpx;
			height: 167rpx;
			background-image: url('https://home.miaokaikeji.com/web/applet/newimg/zcyc.png');
			background-size: 100% 100%;
		}
	}
}
</style>
